<template>
  <el-card>
    <div class="cmd-container">
      <el-button class="item" type="primary" plain @click="sendCmd('模拟TO', 'A5815A110000')">模拟TO</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('模拟变帧格式', 'A5815A220000')">模拟变帧格式</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('状态查询ZWY', 'A581A2070000')">状态查询ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('启动记录ZWY', 'A58180140000')">启动记录ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('擦除存储器ZWY', 'A581221C0000')">擦除存储器ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('打开激振器ZWY', 'A581A0630000')">打开激振器ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('关闭激振器ZWY', 'A58120770000')">关闭激振器ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('关闭激振器ZWY', 'A581824C0000')">读取存储器ZWY</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('ZWY指令7(预留)', 'A581A4030000')">ZWY指令7(预留)</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('锁定记录', 'A5245A55000555AAD22D2D')">锁定记录</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('读取寄存器A', 'A5245A66000555AA5BB5B5')">读取寄存器A</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('读取寄存器B', 'A5245A77000555AA5CC5C5')">读取寄存器B</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('读数请求有效', 'A5245A8800056969696969')">读数请求有效</el-button>
      <el-button class="item" type="primary" plain @click="sendCmd('读数请求无效', 'A5245A9900059696969696')">读数请求无效</el-button>
      <el-button class="item clearfix" type="primary" plain @click="sendCmd('停止度数', 'A5245AAA000555AAB44B4B')">停止度数</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "CmdCard"
}
</script>

<script setup>
import {useStore} from 'vuex'
import webSocket from "../utils/webSocket"

const store = useStore()
const insertLogData = (layload) => {
  return store.dispatch('station/cmdLogCard/insertData', layload)
}
const updateLogData = (layload) => {
  return store.dispatch('station/cmdLogCard/updateResult', layload)
}
const sendCmd = async (displayName, dataFrame, timeout=10) => {
  let dataIndex = null
  try{
    dataIndex = await insertLogData({displayName: displayName})
    let response = await webSocket.sendFrame(dataFrame, true, timeout)
    console.log(response)
    await updateLogData({index: dataIndex, result: '成功'})
  }catch (e) {
    console.log('超时', e)
    await updateLogData({index: dataIndex, result: '超时'})
  }
}
</script>

<style lang="sass" scoped>
.cmd-container
  height: 100%
  $itemWidth: 140px
  display: grid
  grid-auto-flow: row
  grid-template-columns: repeat(auto-fill, $itemWidth)
  grid-gap: 5px
  justify-items: center
  align-items: center
  justify-content: space-around

  .item
    margin: 0
    width: $itemWidth
    height: 30px
</style>
